<script lang="ts" setup>
import NfTagPopover from "@nf-ui/components/overflow-list/src/index";
</script>

<template>
  <div class="tag-popover-demo">
    <nf-tag-popover
      :data="[
        '一个很常很长很长很长很长很长的内容',
        '测试',
        '123123',
        '节阿克苏'
      ]"
      :popover="{ width: 400 }"
    >
      <template #item="data">
        <!--<el-tag>-->
        {{ data }}
        <!--</el-tag>-->
      </template>
      <template #reference="data">
        <el-tag type="danger">+{{ data }}</el-tag>
      </template>
    </nf-tag-popover>
  </div>

  <div v-if="false" class="tag-popover-demo">
    <nf-tag-popover
      :data="[
        '一个节阿克苏节阿克苏节阿克苏节阿克苏长节',
        '测试',
        '123123',
        '节阿克苏'
      ]"
      :popover="{ width: 400 }"
    >
      <template #item="data">
        <el-tag>
          {{ data }}
        </el-tag>
      </template>
      <template #reference="data">
        <el-tag type="danger">+{{ data }}</el-tag>
      </template>
    </nf-tag-popover>
  </div>
</template>

<style lang="scss">
* {
  box-sizing: border-box;
}

.nf-tag-popover {
  width: 100%;
  display: flex;

  .nf-tag-popover-item {
    margin-right: 5px;
    white-space: nowrap;
  }
}

.nf-tag-popover__popover {
  max-width: 800px !important;
  min-width: 100px !important;
  max-height: 80vh;
  overflow: auto;

  .el-tag {
    margin: 5px;
  }
}

.tag-popover-demo {
  width: 20vw;
  border: 1px solid red;
  margin-bottom: 24px;

  .nf-tag-popover-item {
    margin-right: 5px;

    &:last-child {
      margin-right: 0;
    }

    .el-tag,
    .el-tag__content,
    .el-tooltip__trigger {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
